page{
    height: 100%;
}

.cates{
    height: 100%;
    .cates_container{
        /* less中使用calc的时候要注意 */
        /* 如果直接使用calc会直接将（）中的内容进行运算 */
        /* 如果想让calc中的内容保持不变，则需要加 ~'calc()' */
        /* 数据内容布局的height：视图高度100%也就是100vh - 搜索框的高度90rpx */
        height: ~'calc(100vh - 90rpx)';
        /* 表示是伸缩盒子 */
        display: flex;
        .left_menu{

            .menu_item{
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30rpx;
            }

            .activate{
                color: var(--themeColor);
                border-left: 5rpx solid currentColor;
            }

            /* 子项 高度 100% flex */
            /* flex: 2; 表示伸缩盒子宽度为2 */
            flex: 2;
            // background-color: aqua;
        }

        .right_content{
            /* 子项 高度 100% flex */
            /* flex: 5; 表示伸缩盒子宽度为5 */
            flex: 5;
            // background-color: lawngreen;
            .goods_group{
                .goods_title{
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .delimiter{
                        color: #ccc;
                        padding: 0 10rpx;
                    }
                }
                .goods_list{
                    display: flex;
                    /* flex-wrap: wrap; 产生换行效果 */
                    flex-wrap: wrap;
                    navigator{
                        width: 33.33%;
                        text-align: center;
                        image{
                            width: 50%;
                        }
                    }
                }
            }

        }
    }
}